<script setup>
import { ref } from 'vue'
 import { useRouter } from 'vue-router'
const router = useRouter();

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    getEnd();
pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    getEnd();
pageNum.value = num
}//分页模型结束

//输入框
import { Search } from '@element-plus/icons-vue'
import {getBeginService,getEndService} from "@/api/Item.js"
const nameSearch = ref('')

//定义返回列表数据
const endPage = ref([])



//获取结项审核列表
const getEnd=async()=>{
    let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getEndService(params)
    endPage.value=result.data.records
    total.value=result.data.total
}
getEnd();

//项目类别展示
const formatCategory=(row)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[row.category]
}
//事件
const handleSubmit=(row)=> {
      // 处理“提交文件”点击事件
      console.log(row.id)
      router.push({ path: '/finish', query: { id: row.id ,type:2} });
      console.log("提交文件", row);
    }
 const handleDelay=(row)=> {
  router.push({ path: '/extension', query: { id: row.id ,type:2} });
      // 处理“延期”点击事件
      alert("延期")
      console.log("延期", row);
    }
const handleDetail=(row)=> {
  router.push({ path: '/error', query: { id: row.id ,type:2} });
    alert("详情")
      // 处理“详情”点击事件
      console.log("详情", row);
    }
//点击每行跳转到项目详情
const handleRowClick=async(row)=>{
    console.log(row.id)
    router.push({ path: '/item/details',query: { id: row.id } });
} 

//根据项目名查询
const onSearchClick=async()=>{
  let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getBeginService(params)
    beginPage.value=result.data.records
    total.value=result.data.total
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>结项列表</span>
            </div>
        </template>
        <el-input
              v-model="nameSearch"
              style="width: 30%; margin: 10px;"
              class="w-50 m-2"
              size="large"
              placeholder="请输入项目名"
              
            />
            <el-button type="primary" :icon="Search"  @click="onSearchClick"></el-button>
            <el-table :data="endPage" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="项目名称" prop="name"></el-table-column>
            <el-table-column label="项目编号" prop="id" :show-overflow-tooltip="true"
               :header-cell-class-name="'no-wrap'" min-width="150"></el-table-column>
            <el-table-column label="指导老师" prop="teacher"></el-table-column>
            <el-table-column label="负责人" prop="tutor"></el-table-column>
            <el-table-column label="项目类型" prop="category" :formatter="formatCategory"></el-table-column>
            <el-table-column label="项目状态" prop="status">
                    <template v-slot="scope">
                      <span :class="{ 'red-color': scope.row.status === '结项审核未通过', 'blue-color': scope.row.status ==='未结项审核'|| scope.row.status === '结项审核中'|| scope.row.status ==='延期审核中', 'green-color': scope.row.status === '结项审核通过'|| scope.row.status ==='延期审核通过' }">
                        {{ scope.row.status }}
                      </span>
                    </template>
            </el-table-column>
            <el-table-column label="操作">
                  <template v-slot="{row}">
                    <span v-if="row.flag === 1">
                      <el-button type="text" @click.stop="handleSubmit(row)">提交文件</el-button>
                      <el-button type="text" @click.stop="handleDelay(row)">延期</el-button>
                    </span>
                    <span v-else-if="row.flag === 2">
                      <el-button type="text" @click.stop="handleDetail(row)">详情</el-button>
                    </span>
                  </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
        layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: large;
    }
}
//不换行
.no-wrap {
  white-space: nowrap;
}
//审核字体颜色
.red-color {
  color: red;
}

.blue-color {
  color: blue;
}

.green-color {
  color: green;
}
</style>